<template>
  <div className="user_box">
    <Card style="margin-bottom:10px;">
      <p slot="title">综合查询</p>
      <Row>
        <Col span="24">
        <Row class="filter">
          <Form :label-width="160" :model="filter">
            <Col span="6">
              <FormItem label="姓名">
                <Input placeholder="请输入姓名" v-model="filter.name"></Input>
              </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="性别">
              <Select placeholder="请选择性别" v-model="filter.gender">
                <Option value="男">男</Option>
                <Option value="女">女</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="出生年" prop="birthday">
                <DatePicker  v-model="filter.min_birthday" type="year" placeholder="请选择出生年" format="yyyy" ></DatePicker>
                  -
                <DatePicker v-model="filter.max_birthday" type="year" placeholder="请选择出生年" format="yyyy" ></DatePicker>
              </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="现居地">
              <Input placeholder="请输入现居地" v-model="filter.living_place"></Input>
            </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="家乡">
              <Input placeholder="请输入家乡" v-model="filter.hometown"></Input>
            </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="身高">
                <Col span="9">
                  <Input type="number" placeholder="请输入身高" v-model="filter.min_height"/>
                </Col>
                <Col span="2" style="text-align:center;">
                  -
                </Col>
                <Col span="9">
                  <Input type="number" placeholder="请输入身高" v-model="filter.max_height"/>
                </Col>
              </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="学历">
              <Select placeholder="请选择学历" v-model="filter.education">
                <Option value="专科">专科</Option>
                <Option value="本科">本科</Option>
                <Option value="硕士">硕士</Option>
                <Option value="博士">博士</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="毕业院校">
              <Input placeholder="请输入毕业院校" v-model="filter.school"></Input>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="最低年收入">
              <Col span="12">
                <Input type="number" placeholder="请输入年收入" v-model="filter.annual_income"></Input>
              </Col>
            </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="是否购房">
              <Select  placeholder="请选择是否购房" v-model="filter.is_buy_house">
                <Option value="是">是</Option>
                <Option value="否">否</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="是否已展示">
              <Select  placeholder="是否已展示" v-model="filter.is_show">
                <Option value="是">是</Option>
                <Option value="否">否</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="运营人员姓名">
                <Input placeholder="请输入运营人员姓名" v-model="filter.operator_name"></Input>
              </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="嘉宾来源">
                  <Input placeholder="请输入嘉宾来源" v-model="filter.source_type"></Input>
                </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="是否愿意上墙">
                <Select placeholder="请选择性别" v-model="filter.on_wall">
                  <Option value="是">是</Option>
                  <Option value="否">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="24" style="display: flex;flex-direction: row-reverse;margin-bottom: 20px;">
            <Button  type="default" @click="research">
              <Icon type="ios-redo"></Icon>重置 </Button>
            <Button style="margin-right: 15px;" type="primary" @click="search">
              <Icon type="search"></Icon> 搜索嘉宾 </Button>
            </Col>
          </Form>
        </Row>
        </Col>
      </Row>
    </Card>
    <Card>
      <p slot="title">嘉宾管理</p>
      <div slot="extra">
          <Button type="primary" size="small" style="margin-right:20px" @click="getShareLink('question')">获取问卷二维码</Button>
          <!-- <Button type="primary" size="small" style="margin-right:20px"  @click="getShareLink('matchmaker')">获取红娘分享二维码</Button>
          <Button type="primary" size="small" style="margin-right:20px" @click="getShareLink('group')" data-type="group">获取群二维码</Button> -->
      </div>
    	<Button type="primary" size="large" icon="ios-add-circle-outline" style="margin-bottom: 10px;text-align:right;" @click="addMember">新增会员</Button>
      <Table border stripe :data="list" :columns="columns" />
      <Page
        :current="page"
        :style="pageStyle"
        @on-change="changePage"
        :page-size="15"
        :total="total"
      ></Page>
    </Card>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import format from "@format";
import { mapState, mapActions } from 'vuex'
export default {
  name: "home",
  data() {
    return {
      is_search: false,
      total: 0,
      currentLevel: "",
      currentData: {},
      page: 1,
      list: [],
      currentImage: "",
      columns: [
        {
          title: "入库时间",
          width: 150,
          align: "center",
          render: (h, params) => {
            let formatType = "YYYY-MM-DD hh:mm:ss";
            return h("div", params.row.create_date ? format(params.row.create_date, formatType) : format(new Date(), formatType));
          },
        },
        {
          title: "嘉宾姓名",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.name ? params.row.name : "");
          },
        },{
          title: "是否愿意上墙",
          width: 120,
          align: "center",
          render: (h, params) => {
            return h("div", !!params.row.is_on_wall ? "是" : "否");
          },
        },
        {
          title: "嘉宾头像",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h('img', {
              domProps: {
                src: params.row.headimgurl
              },
              style: {
                marginTop: "5px",
                borderRadius:"50%",
                height: '40px',
                lineHeight:"40px"
              }
            });
          },
        },
        {
          title: "嘉宾昵称",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.nickname || "");
          },
        },
        {
          title: "运营人员",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.operator_name ? `${params.row.operator_name} - ${params.row.operate_type || (params.row.openid ? "投稿" : "手动输入")}` : "");
          },
        },
        {
          title: "性别",
          key: "gender",
          width: 80,
          sortable: true,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.gender);
          },
        },
        {
          title: "出生日期",
          width: 150,
          align: "center",
          render: (h, params) => {
            const date = dayjs(params.row.birthday).format('YYYY-MM-DD');
            return h("div", date);
          },
        },
        {
          title: "身高(cm)",
          key: "height",
          width: 120,
          sortable: true,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.height);
          },
        },
        {
          title: "现居地",
          width: 220,
          align: "center",
          render: (h, params) => {
            return h("div", Array.isArray(params.row.living_place) ? params.row.living_place.filter(item=> item!='中国').join("-") : "");
          },
        },
        {
          title: "家乡",
          width: 220,
          align: "center",
          render: (h, params) => {
            return h("div", Array.isArray(params.row.hometown) ? params.row.hometown.filter(item=> item!='中国').join("-") : "");
          },
        },
        {
          title: "学历",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.education);
          },
        },
        {
          title: "毕业院校",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.school);
          }
        },
        {
          title: "职业",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.job);
          }
				},
				{
					title: "年收入(万元)",
          width: 110,
          align: "center",
          render: (h, params) => {
            const { privacy_information } = params.row;
            return h("div", privacy_information && privacy_information.年收入 ? privacy_information.年收入 : "");
          }
				},
				{
					title: "是否购房",
          width: 120,
          key: "是否购房",
          sortable: true,
          align: "center",
          render: (h, params) => {
            const { privacy_information } = params.row;
            return h("div", privacy_information && privacy_information.是否购房 ? privacy_information.是否购房 : "");
          }
				},
        {
          title: "操作",
          key: "view",
          width: 300,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            let bar = [];
            bar.push(
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
											let baseURL = `http://mp.smcode.com.cn/detail/${params.row.id}/${encodeURIComponent(params.row.name)}/third_${this.$store.state.user.currentUser.id}`
                      this.$Modal.confirm({
                          title: '分享链接',
                          content: baseURL
                      })
                    },
                  },
                },
                "获取分享链接"
              )
            );
            bar.push(
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
											console.log(this.$router, params.row)
											this.$router.push({
												name: 'user_detail',
												query: {
													id: params.row.id,
													name: params.row.name
												}
											})
                    },
                  },
                },
                "查看详情"
              )
            );
            
            bar.push(h('Button',{
                    props: {
                        type: 'error',
                        size: 'small'
                    },
                    style: {
                        marginRight: "10px"
                    },
                    on: {
                        click: () => {
                            this.$Modal.confirm({
                                title: '确定删除?',
                                onOk: () => {
                                    this.jsonrpc.blind.admin.updateCustomer(Object.assign(params.row,{
                                      "is_removed": true
                                    })).then(()=>{
                                        this.changePage(this.page)
                                    })
                                }
                            })
                        }
                    }
              }, "删除"));
            return h("div", bar);
          },
        },
      ],
      pageStyle: {
        marginTop: "15px",
      },
    };
  },
  computed: {
    ...mapState({
      filter(state) {
        return state.search.filter;
      }
    })
  },
  methods: {
    ...mapActions([
      'resetFilter'
    ]),
    changePage(page) {
      let param = {
        start: (page - 1) * 15, 
        limit: 15
      }
      if(this.is_search) {
        param.filter = JSON.parse(JSON.stringify(this.filter));
        param.filter.is_show =  param.filter.is_show == "是" ? true : false;
        param.filter.height = [param.filter.min_height,param.filter.max_height].filter(item=>item).sort();
        param.filter.birthday = [param.filter.min_birthday, param.filter.max_birthday].filter(item=>item).sort();
        if(param.filter.birthday.length > 0) {
          param.filter.birthday = param.filter.birthday.map(item => {
            return new Date(item).getTime();
          })
        }
      }
      this.jsonrpc.blind.admin
        .getCustomers(param)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.page = page;
        });
    },
		addMember() {
			this.$router.push({
				name: 'user_detail'
			})
    },
    research() {
      this.is_search = false;
      this.page = 1;
      this.resetFilter();
      this.changePage(this.page);
    },
    search() {
      this.is_search = true;
      this.changePage(this.page);
    },
    initFilter() {
      this.filter = {
          external_id:"",
          gender: "",
          on_wall: "",
          min_birthday: "",
          max_birthday: "",
          height: "",
          living_place: "",
          hometown: "",
          education: "",
          school: "",
          annual_income: "",
          is_buy_house: "",
          is_show: "",
          min_height: "",
          max_height: ""
      }
    },
    getShareLink(key) {
      this.jsonrpc.blind.admin.getShareLink().then(res=> {
        window.open(res[key],"_target");
      })
    }
  },
  mounted() {
    this.is_search = true;
    this.changePage(this.page);
  },
};
</script>
<style>
.show_view_modal .ivu-modal-footer {
  display: none;
}
.ivu-modal-confirm-body {
  word-wrap:break-word;
}
</style>